@import '/src/styles/variables/mixins';

.container {
  display: flex;
  align-items: center;
}

.label {
  @include typography($fs: var(--font-size-s));

  cursor: pointer;

  display: inline-flex;
  gap: 6px;
  align-items: center;

  color: var(--color-light-100);

  transition: 0.2s ease-in-out;

  &.disabled {
    color: var(--color-dark-100);
  }
}

.root {
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 18px;
  height: 18px;

  border: 0;
  border-radius: 2px;
  outline: 2px solid var(--color-light-900);

  transition: 0.2s ease-in-out;

  :disabled {
    cursor: initial;
    outline: 2px solid var(--color-dark-100);
  }
}

.buttonWrapper {
  all: unset;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  background-color: inherit;
  border-radius: 50%;

  transition: 0.1s ease-in-out;

  &.disabled {
    cursor: default;
  }

  &:active:not(.disabled) {
    background-color: var(--color-dark-100);
  }

  &:focus-within:not(.disabled),
  &:hover:not(.disabled),
  &:hover .root:not([data-state='checked'], .disabled) {
    background-color: var(--color-dark-100);
  }
}

.checked {
  background-color: var(--color-light-100);
  outline: none;

  &.disabled {
    background-color: var(--color-dark-100);
  }
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}
